<!DOCTYPE html>
<%@ page language="java" import="java.util.*"
	contentType="text/html;charset=utf-8"%>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta charset="gbk">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection" />
<meta content="yes" name="apple-touch-fullscreen" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<link type="text/css" rel="stylesheet" href="stylesheets/style.css" />
<style>
<meta charset ="utf-8">
<meta http-equiv ="X-UA-Compatible" content="IE=edge, Chrome =1"/>
<meta name ="viewport" content="width=device-width, initial-scale =1, maximum-scale =1, user-scalable=no"> 
<meta name ="keywords" content ="Huooo"> 
<meta name="description" content ="Huooo">
<meta name ="author" content ="Huooo">
<title>Huooo </title> 
<link rel =" shortcut icon " href ="">
<!--css files -->
<!--css style -->
<style>body, p, ul, ol, li {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

body {
	font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}

.back-btn {
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}

.m-feedback {
	padding: 2rem 1.4rem 0;
	font-size: .7rem;
	color: #2296e8;;
}

.m-feedback>div {
	margin-bottom: 1.6rem;
}

.m-feedback>div:last-child {
	margin-bottom: 0;
}

.m-feedback label {
	display: block;
	color: #2296e8;
}

.m-feedback input, .m-feedback textarea {
	width: 97%;
	height: 1.5rem;
	margin: .3rem auto;
	padding-left: 3%;
	border: 1px solid #ccc;
	border-radius: .2rem;
	outline: none;
}

.m-feedback .form-feedback {
	height: 5rem;
	padding-top: .3rem;
	resize: none;
}

.btn-submit-wrapper {
	text-align: center;
}

.btn-submit {
	display: inline-block;
	padding: .4rem 1rem;
	margin: 2rem auto 0;
	color: #fff;
	border-radius: .3rem;
	background-color: #2296e8;
	cursor: pointer;
}

.modal-alert-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
}

.modal-alert {
	position: relative;
	width: 40%;
	min-height: 2rem;
	margin: 5rem auto;
	padding: 2rem;
	border-radius: .3rem;
	text-align: center;
	background-color: rgba(255, 255, 255, 1);
}

.modal-close {
	position: absolute;
	top: 7rem;
	left: 4.5rem;
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
	background-color: #fff;
	border-radius: 50%;
	opacity: 1;
	font-size: 1.2rem;
	color: #ccc;
	text-align: center;
	line-height: 1.6rem;
}
</style>
</head>
<body>
	<div class='main m-feedback'>
		<div align="center">
		<img id="userImg" alt="头像" src="./nav/default.png">
		</div>
		<div align="center">
			<span>UserName:</span>
			<div id="userName" style="display: inline-block"></div>
		</div>
		<div align="center">
			<span>UserId:</span>
			<div id="userId" style="display: inline-block"></div>
		</div>
		<div>
			<label for="nickname">昵称 : </label>
			<input id='nickname' type="text" placeholder="nickname" disabled>
		</div>
		<div>
			<label for="feedback">您的反馈 : </label>
			<textarea id='feedback' class='form-feedback' name="" placeholder="请输入您的反馈..."></textarea>
		</div>
		<div>非紧急反馈只-对所有其他问题请,联系你的操作员.</div>
		<div class='btn-submit-wrapper'>
			<span class='btn-submit'>Submit</span>
		</div>
	</div>
	
	<%--调用jquery需要的库，手机版和电脑版的不同 --%>
	<script type="text/javascript" src="javascripts/zepto.min.js"></script>
	<%--手机版钉钉免登引入的jsapi,和电脑版引入的不同-引入dingtalk.js会得到一个全局变量dd，支持amd、cmd引入方式 --%>
	<script type="text/javascript"	src="http://g.alicdn.com/dingding/open-develop/1.6.9/dingtalk.js"></script>
	<script type="text/javascript" src="javascripts/logger.js"></script>
	
	<!-- js script -->
	<script>
		/* --- root fontSize begin --- */
		(function(doc, win) {
			var _root = doc.documentElement,
			resizeEvent = 'orientationchange' in window ? 'orientationchange': 'resize',
			resizeCallback = function() {
				var clientWidth = _root.clientWidth,
				fontSize = 20;
				if (!clientWidth)
					return;
				if (clientWidth < 640) {
					fontSize = 20 * (clientWidth / 320);
				} else if (clientWidth >= 640 && clientWidth < 768) {
					fontSize = 20 * (640 / 320);
				} else {
					fontSize = 20;
				}
				_root.style.fontSize = fontSize + 'px';
			};
	
			if (!doc.addEventListener)
				return;
			win.addEventListener(resizeEvent, resizeCallback, false);
			doc.addEventListener('DOMContentLoaded', resizeCallback, false);
		})(document, window);
		/* end root fontSize */
	</script>
	
	<script type="text/javascript">
	    /* --- API获取签名信息 begin --- */	
		var _config = '';
		var corpId = "ding00b1a56210609a0835c2f4657eb6378f"; // 企业的corpId		
		$(document).ready(function() {
			initData();
		});
		//加载初始化数据
	
		/**
		 * 首先，借用公司的agentId和微应用的url（一般由你司企业钉钉管理员提供）通过后台提供的API接口获取到实时的鉴权信息
		 （agentId，corpId，timeStamp，nonceStr，signature）；
		 */
		function initData() {
			var url = window.location.href;
			$.ajax({
				type : 'post', //请求方式
				async : false, //是否异步
				//url : '/jsApi/get_js_config', //这两个URL都可以，注意，下面URL传递的参数，一定要传递过去。
				url : '/jsApi/getConfig',
				data : {
					"url" : url,
					"corpId" : corpId,
					"agentId" : 188230991
				},
				beforeSend : function(request) {
					//请求前的处理
					//request.setRequestHeader("Test", "Chenxizhang");
					alert('远程调用开始...');				 
				},
				success : function(data) {
					//请求成功处理，和本地回调完全一样
					_config = eval('(' + data + ')');
					DDConfig(_config);
				},
				complete : function(data) {
					//请求完成的处理
					// alert('远程调用成功，状态文本值：'+textStatus);
				},
				error : function(errorThrown) {
					//请求出错处理			
					alert("error... 异常信息：" + errorThrown);
				}
			});
		}
		/* --- end API获取签名信息 --- */
	
		/**
		 * 然后，用这个鉴权信息区配置钉钉api接口的dd.config，然后去操作钉钉部分需要安全鉴定的api;
		 */
		/* --- DD Config Function --- */
		function DDConfig(_config) {
			// 弹出DD全局变量
			//alert('4. DD全局变量：'+JSON.stringify(dd));
			// 配置DD签名等相关信息
			dd.config({
				signature : _config.signature,
				nonceStr : _config.nonceStr,
				timeStamp : _config.timeStamp,
				agentId : _config.agentId,
				corpId : _config.corpId,
				jsApiList : [ 'runtime.info', 'biz.contact.choose',
						'device.notification.confirm', 'device.notification.alert',
						'device.notification.prompt', 'device.notification.toast',
						'biz.ding.post', 'biz.util.openLink',
						'device.geolocation.get', 'biz.util.scan', 'biz.user.get',
						'biz.navigation.close', 'biz.util.open',
						'biz.chat.chooseConversationByCorpId' ]
			});		
	
			/**
			 * 之后，用钉钉api的biz.user.get获取用户信息
			 */
			dd.ready(function() {
						alert('5. DD begin...');
						  // alert('5. DD begin...');

			            // dd.runtime.permission.requestAuthCode({
			            //   corpId : _config.corpId,
			            //   onSuccess : function(info) {
			            //         alert('authcode: ' + info.code);
			            //   },
			            //   onFail : function(err) {
			            //      alert('fail: ' + JSON.stringify(err));
			            //   }
			            // }); // 因为可以借用DD接口拿到简单的用户信息，此次需求不需要详细用户信息，即可不做免登陆操作
			            
			            //开发者在某些场合需要获取用户的基本信息，而这些用户都不在一个企业组织下面，可以使用这个接口)
						dd.biz.user.get({
									onSuccess : function(info) {
										//返回用户id,昵称和头像。
										alert('6. userGet success: '+ JSON.stringify(info));
										alert('7. user nickname: '+ JSON.stringify(info.nickName));
										
									   //通用JSAPI接口获取用户信息						
	                					document.getElementById("userName").innerHTML = info.nickName;
	                					document.getElementById("userId").innerHTML = info.emplId;                					
	                					// 图片
	                					if(info.avatar.length != 0){
	                			            var img = document.getElementById("userImg");
	                			            img.src = info.avatar;
	                			                      img.height = '100';
	                			                      img.width = '100';
	                			          }
										
										$('#nickname').val(info.nickName);
									},
									onFail : function(err) {
										dd.device.notification.alert({
											message : "DD userGet fail: "+ JSON.stringify(err),
											title : "Huooo",
											buttonName : "OK"
										});
									}
								});
					});
			dd.error(function(err) {
				dd.device.notification.alert({
					message : "DD error: " + JSON.stringify(err),
					title : "Huooo",
					buttonName : "OK"
				});
			});
		}
	
		/* --- end DD API --- */
		
		/* --- 提交反馈信息 begin --- */
		$(document)
				.on('click','.btn-submit',
						function() {
							var nickname = $('#nickname').val(), feedback = $('#feedback').val();
							if (nickname === '') {
								dd.device.notification.alert({
									message : "请输入您的昵称",
									title : "Huooo",
									buttonName : "OK"
								});
								return false;
							}
							if (feedback === '') {
								dd.device.notification.alert({
									message : "请输入您的反馈.",
									title : "Huooo",
									buttonName : "OK"
								});
								return false;
							}
							$.ajax({
										type : 'POST',
										url : '提交表单信息的API，后台提供',
										data : {
											nickname : nickname,
											feedback : feedback
										},
										dataType : 'json',
										success : function(data) {
											console.log('success-submit-feedback');
											if (data.status) {
												// alert('8. 提交内容：'+ nickname +','+ feedback );
												dd.device.notification
														.alert({
															message : "Success. Thank you.",
															title : "Huooo",
															buttonName : "OK",
															onSuccess : function() {
																$('#feedback').val(
																		'');
															},
															onFail : function() {
															}
														});
	
											} else {
												alert('有错误，请再次提交。谢谢你.');
											}
										},
										error : function(data) {
											console.log('error-submit-feedback');
										}
									})
						});
	</script>
</body>
</html>